<template>
  <div class="detailPageContainer" :style="{width: isFold ? 'calc(40% - 25px)' : 'calc(40% - 115px)'}">
    <div class="detailPageMain" id="detailPageMain">
      <div class="detailItem" v-for="(item, index) in formData" :key="index" :id="item.classification + 'view'">
        <h3 class="flex align-center"><i :class="['sjcj', item.icon]"></i>{{item.name}}</h3>
        <div class="content">
          <p v-for="(it, i) in item.formFields" :key="i">
            {{it.label}}: <b>{{it.value}}</b>
          </p>
        </div>
      </div>
    </div>
   <div class="footerMain flex align-center justify-end">
     <el-button size="large">重置</el-button>
     <el-button type="primary" size="large">确认保存</el-button>
   </div>
  </div>
</template>
<script setup name="DetailPage">
import useAppStore from '@/store/modules/app'
const appStore = useAppStore();
let isFold = computed(()=>appStore.isFold);
let formData = computed(() => appStore.formData);
</script>
<style lang="scss" scoped>
.detailPageContainer{
  width: calc(40% - 115px);
  transition: all 0.2s;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 20px 20px 0;
  box-shadow: -5px 0 5px #f1f1f1;
  .detailPageMain{
    width: 100%;
    height: calc(100% - 80px);
    overflow-x: hidden;
    .detailItem{
      box-shadow: 0 5px 5px #f1f1f1;
      border: 1px solid rgb(228, 231, 237);
      h3{
        background: #f1f1f1;
        height: 40px;
        padding: 0 15px;
        margin: 0;
        i{
          margin-right: 10px;
        }
      }
      .content{
        padding: 15px 15px 20px;
        p{
          margin: 0;
          font-size: 16px;
          line-height: 26px;
          padding: 7px 0;
          overflow-wrap: break-word;
        }
      }

    }
  }
  .footerMain{
    height: 80px;
    border-top: 1px solid #f1f1f1;
    box-sizing: border-box;
    :deep .el-button{
      width: 200px;
    }
  }
}
</style>